<template>
  <div class="housedetail_container">
    <div class="container_img">
      <div class="container">
        <div class="container_img_left" v-if="houselists">
          <el-row :gutter="20">
            <el-col :span="16">
              <div
                style="height:500px;width:819px;-webkit-user-select:none;-ms-user-select:none;-moz-user-select:none;user-select: none;"
                class="lunbo"
                v-if="imgarr.length>3"
              >
                <swiper :options="swiperOptionTop" class="gallery-top" ref="swiperTop">
                  <swiper-slide
                    :style="{backgroundImage:'url('+item+')'}"
                    v-for="(item,index) in imgarr"
                    :key="index"
                  ></swiper-slide>
                </swiper>
                <swiper
                  :options="swiperOptionThumbs"
                  class="gallery-thumbs"
                  ref="swiperThumbs"
                  v-if="imgarr.length>3"
                >
                  <swiper-slide
                    :style="{backgroundImage:'url('+item+')'}"
                    v-for="(item,index) in imgarr"
                    :key="index"
                  ></swiper-slide>
                  <div
                    class="swiper-button-prev"
                    slot="button-prev"
                    style="color:#fff;backgroundImage:none;top:0;left:0;width:164px;height:40px;backgroundColor:rgba(0,0,0,0.5)"
                  >
                    <img src="../../../assets/img/arrow_top.png" alt style="margin-top:12px;" />
                  </div>
                  <div
                    class="swiper-button-next"
                    slot="button-next"
                    style="color:#fff;backgroundImage:none;right:0px;top:460px;width:164px;height:40px;backgroundColor:rgba(0,0,0,0.5)"
                  >
                    <img src="../../../assets/img/arrow_down.png" alt style="margin-top:12px;" />
                  </div>
                </swiper>
              </div>
              <div style="height:500px;width:819px" class="lunbo" v-if="imgarr.length<=3">
                <div
                  class="gallery-top"
                  :style="{backgroundImage:'url('+lunboUrl+')',backgroundSize:'100% 100%',backgroundRepeat:'no-repeat'}"
                ></div>
                <div class="gallery-thumbs">
                  <img
                    v-for="(item,index) in imgarr"
                    :key="index"
                    class="swiper-slide2"
                    @click="changelunbo(index)"
                    :src="item"
                  />
                  <div
                    style="color:#fff;backgroundImage:none;top:0px;left:0;width:164px;height:40px;backgroundColor:rgba(0,0,0,0.5);position:absolute"
                  >
                    <img src="../../../assets/img/arrow_top.png" alt style="margin-top:12px;" />
                  </div>
                  <div
                    style="color:#fff;backgroundImage:none;right:0px;top:460px;width:164px;height:40px;backgroundColor:rgba(0,0,0,0.5);position:absolute"
                  >
                    <img src="../../../assets/img/arrow_down.png" alt style="margin-top:12px;" />
                  </div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="house_box_right">
                <div id="allmap"></div>
                <div class="ambitusbox">
                  <ul class="ambituslist">
                    <li
                      v-for="(item,index) in ambituslist"
                      :key="index"
                      :class="{'actives' : ambitusindex === index}"
                      @click="changebg(item,index)"
                    >
                      <div class="box">
                        <img :src="item.src" alt class="ambitusimg" />
                        <p class="text">{{item.text}}</p>
                      </div>
                    </li>
                    <div style="clear:both;"></div>
                  </ul>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
        <div class="container_intro">
          <div class="container_intro_top">
            <h3 class="container_intro_housename">{{houselists.zh_name}}</h3>
            <img src="../../../assets/img/zheng.png" alt srcset class="container_intro_img" />
            <!-- <div class="building_tag">
              <ul v-if="houselists.building_tag">
                <li
                  v-for="(item,index) in houselists.building_tag"
                  :key="index"
                  class="tag"
                >{{item.zh_tag_name}}</li>
                <div style="clear:both;"></div>
              </ul>
            </div>-->
          </div>
          <div>
            <p class="addr" v-if="houselists.zh_addr">{{houselists.zh_addr}}</p>
            <p class="addr" v-else>暂无详细地址</p>
          </div>
          <div>
            <ul class="tag_list">
              <li class="taglists" v-if="houselists.building_level">
                <ul>
                  <li>
                    <img src="../../../assets/img/stretch.png" alt />
                    <span class="iten">地段</span>
                    <el-rate v-model="houselists.building_level.location_level" disabled></el-rate>
                  </li>
                  <li>
                    <img src="../../../assets/img/grade.png" alt />
                    <span class="iten">大楼等级</span>
                    <el-rate v-model="houselists.building_level.mansion_level" disabled></el-rate>
                  </li>
                  <li>
                    <img src="../../../assets/img/subway.png" alt />
                    <span class="iten">交通</span>
                    <el-rate v-model="houselists.building_level.traffic_level" disabled></el-rate>
                  </li>
                  <li>
                    <img src="../../../assets/img/ambitus.png" alt />
                    <span class="iten">周边配套</span>
                    <el-rate v-model="houselists.building_level.facilities_level" disabled></el-rate>
                  </li>
                </ul>
              </li>
              <div style="clear:both;"></div>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="tagBox">
      <div class="tags">
        <ul class="taglist">
          <li v-for="(item,index) in taglist" :key="index" class="tag_container">
            <img :src="item.src" alt="" srcset="" class="tagImg">
            <span class="tagName">{{item.label}}</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 办公空间 -->
    <div class="housedetail_container_box">
      <div class="officespace">
        <div class="housedetail_container_box_share">
          <ul class="housedetail_container_box_share_top">
            <li>
              <h2 class="room_type_title">共享办公空间</h2>
            </li>
            <li v-if="houseinfo">
              <!-- <img src="../../../assets/img/preferential.png" alt class="coupon_img" /> -->
              <span class="coupontext">{{houseinfo.cheap_type}}</span>
            </li>
            <li v-if="houseinfo.vr_path">
              <el-button class="room_type_VR" @click="shareVR">VR看房</el-button>
            </li>
            <li v-if="houseinfo.vr_path==''">
              <div class="room_type_VR"></div>
            </li>
            <li class="pricebox">
              <ul v-if="houseinfo">
                <li style="float:right;font-size:30px;color:#ED4242;margin:0px 0px 0px 40px;">
                  {{lowSharePrice}}
                  <span class="price" v-if="sharetableData.length!=0">{{houseinfo.unit_name}}</span>
                </li>
                <!-- <li style="float:right;font-size:20px;color:#ED4242;margin:9px 22px 0px 0px;" v-else>暂无房源</li> -->
              </ul>
            </li>
            <div style="clear:both;"></div>
          </ul>
          <el-dialog :visible.sync="dialogbig" center :close-on-click-modal="false">
            <div style="height:450px;width:600px;margin:0 auto">
              <img :src="bigUrl" style="height:100%;width:100%;" />
            </div>
          </el-dialog>
          <!-- 表格 -->
          <div class="table_box">
            <el-button class="recommandBtn" v-if="sharetableData.length==0" @click="goChatP2P(1)">获取相关房源推荐</el-button>
            <el-table :data="sharetableData" :header-cell-style="getRowClass" ref="multipleTable" :row-style="rowStyle" :tooltip-effect="light" row-key="id"
              :expand-row-keys="expands" :highlight-current-row="sharebg" @row-click="rowClickShare" @cell-mouse-enter="changeFormbg" @cell-mouse-leave="refreshFormbg"
              style="min-height:220px;" empty-text="暂无房源"
               class="table">
              <el-table-column label="照片" prop="src" align="center">
                <template slot-scope="scope">
                  <img :src="scope.row.house_picture[0]" class="head_pic" style="position:relative;width:60px;height:60px;"
                    v-if="scope.row.house_picture !=''"/>
                  <div style="position:absolute;left:18px;top:93px;" v-if="scope.row.house_picture !=''">
                    <img src="../../../assets/img/sousuo.png" alt style="height:12px;width:12px;"/>
                    <span style="font-size:12px;">查看更多</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="品牌" prop="brand_logo" align="center" style="min-width:50px;font-size:14px;">
                <template slot-scope="scope">
                  <img :src="scope.row.brand_logo" class="head_pic" v-if="scope.row.brand_logo!=''" />
                  <img src="../../../assets/img/brandlogo.png" alt srcset class="head_pic" v-if="scope.row.is_fangda==1"/>
                </template>
              </el-table-column>
              <el-table-column label="房型" prop="zh_type" align="center" style="width:90px;font-size:14px;">
                <template slot-scope="scope">
                  <span>{{scope.row.zh_type}}</span>
                </template>
              </el-table-column>
              <el-table-column label="窗户" prop="is_window" align="center" width="60px">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_fangda == 1">—</span>
                  <span v-if="scope.row.is_fangda == 0 && scope.row.is_window == 1">有</span>
                  <span v-if="scope.row.is_fangda == 0 && scope.row.is_window == 0">无</span>
                </template>
              </el-table-column>
              <el-table-column label="面积" prop="house_area" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_fangda == 1">多种选择</span>
                  <span v-else-if="scope.row.is_fangda == 0 && scope.row.house_area == 0.0 ">—</span>
                  <span v-else-if="scope.row.is_fangda == 0 && scope.row.house_area != 0.0 ">{{scope.row.house_area}}m²</span>
                </template>
              </el-table-column>
              <el-table-column label="人数" prop="person_num" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_fangda == 1">不限</span>
                  <span
                    v-if="scope.row.is_fangda == 0 && scope.row.person_num!=0"
                  >{{scope.row.person_num}}人</span>
                  <span v-if="scope.row.is_fangda == 0 && scope.row.person_num0==0">不限</span>
                </template>
              </el-table-column>
              <el-table-column label="优惠" prop="cheap_type" align="center" min-width="140">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_fangda == 1">—</span>
                  <span
                    v-if="scope.row.is_fangda == 0 && scope.row.cheap_type!=''"
                    :style="TextStyle"
                  >{{scope.row.cheap_type}}</span>
                  <span
                    v-if="scope.row.is_fangda == 0 && scope.row.cheap_type==''"
                    :style="TextStyle"
                  >—</span>
                </template>
              </el-table-column>
              <el-table-column label="原价/一口价" prop="price" align="center" min-width="140">
                <template slot-scope="scope">
                  <div v-if="scope.row.discount_price != ''" class="price_con">
                    <ul class="price_con_left">
                      <li class="priceBox">
                        <span style="color:#141414;font-size:18px;text-decoration:line-through;text-decoration-color: #ED4242;">{{scope.row.price}}</span>
                        <span style="color:#141414;font-size:12px;" v-if="scope.row.price">{{scope.row.unit_name}}</span>
                      </li>
                      <li class="priceBox">
                        <span style="color:#ED4242;font-size:18px;" v-if="scope.row.discount_price!=''">{{scope.row.discount_price}}</span>
                        <span v-if="scope.row.discount_price!=''" style="color:#ED4242;font-size:12px;">{{scope.row.unit_name}}</span>
                      </li>
                      <li class="priceBox">
                        <span style="color:#4D4D4D;font-size:15px;" v-if="scope.row.m_price !=''">{{scope.row.m_price}}</span>
                        <span style="color:#4D4D4D;font-size:11px;" v-if="scope.row.m_price !=''">{{scope.row.m_unit}}</span>
                      </li>
                    </ul>
                    <div class="price_con_right">
                      <el-tooltip class="item" effect="dark" content="房大精选房源" placement="bottom">
                        <img src="https://images.zoomoffices.com/cnImages/icon/youxuan.png" alt="" v-if="scope.row.is_hot==1">
                      </el-tooltip>
                      
                      <el-tooltip class="item" effect="dark" content="一口价" placement="bottom" >
                        <img src="https://images.zoomoffices.com/cnImages/icon/yikoujia.png" alt="" v-if="scope.row.is_ykprice==1">   
                      </el-tooltip>
                    </div>
                  </div>
                  <div v-else class="price_con">
                    <ul class="price_con_left">
                      <li class="priceBox">
                        <span style="color:#141414;font-size:18px;" v-if="scope.row.price">{{scope.row.price}}</span> 
                        <span style="color:#141414;font-size:12px;" v-if="scope.row.price">{{scope.row.unit_name}}</span>
                      </li>
                      <li class="priceBox">
                        <span style="color:#4D4D4D;font-size:15px;" v-if="scope.row.m_price">{{scope.row.m_price}}</span>
                        <span style="color:#4D4D4D;font-size:11px;" v-if="scope.row.m_price">{{scope.row.m_unit}}</span>
                      </li>
                    </ul>
                    <div class="price_con_right">
                      <p class="priceBox">
                      <el-tooltip class="item" effect="dark" content="房大精选房源" placement="bottom">
                        <img src="https://images.zoomoffices.com/cnImages/icon/youxuan.png" alt="" v-if="scope.row.is_hot==1">
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="一口价" placement="bottom" >
                        <img src="https://images.zoomoffices.com/cnImages/icon/yikoujia.png" alt="">   
                      </el-tooltip>
                    </p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div class="collpase">
                    <div class="box_collpase_left">
                      <div class="shareLeft" v-if="props.row.house_picture.length!=0" @click="houseimglunbo(props.row)">
                        <img :src="props.row.house_picture[0]" alt="房源图片" srcset class="houseimg" />
                        <img src="../../../assets/img/radiu_left.png" class="zuo"/>
                        <img src="../../../assets/img/radiu_right.png" class="you"/>
                      </div>
                    </div>
                    <div class="box_collpase_right">
                      <ul v-if="shareconfigure" class="box_collpase_right_list">
                        <li v-for="(items,indexs) in shareconfigure.information_data" class="listbox">
                          <ul class="taglist">
                            <li>
                              <p>免租时间：{{items.free_rent}}</p>
                              <p v-if="items.is_all==0">全包：否</p>
                              <p v-if="items.is_all==1">全包：是</p>
                              <p v-if="items.is_24hours==0">24小时进出：否</p>
                              <p v-if="items.is_24hours==1">24小时进出：是</p>
                            </li>
                            <li>
                              <p>最短租期：{{items.min_rent_duration}}月</p>
                              <p>装修情况：{{items.decoration_data}}</p>
                            </li>
                            <li>
                              <p v-if="items.deposit">押金：{{items.deposit}}</p>
                              <p v-else>押金：{{items.deposit}}</p>
                              <p v-if="items.is_furniture==0">家具：无</p>
                              <p v-if="items.is_furniture==1">家具：有</p>
                            </li>
                            <li>
                              <p v-if="items.property_fee == 0.0">物业费：未知</p>
                              <p v-else>物业费：{{items.property_fee}} 元/每月</p>
                              <p>座向：{{items.orientation_data}}</p>
                            </li>
                          </ul>
                        </li>
                        <li class="infrastructure" v-if="shareconfigure.Infrastructure_data">
                          <h3 class="title">基础设施</h3>
                          <ul class="infrastructuretag">
                            <li v-for="(itemss,ind) in shareconfigure.Infrastructure_data">
                              <span v-if="itemss.icon_url==null"></span>
                              <div v-else>
                                <img :src="itemss.icon_url" alt="icon" class="basicimg" />
                                <span class="basicname">{{itemss.zh_name}}</span>
                              </div>
                            </li>
                            <div style="clear:both;"></div>
                          </ul>
                        </li>
                        <li class="enterprise_data" v-if="shareconfigure.enterprise_data">
                          <h3 class="title">企业服务</h3>
                          <ul class="enterprise_data_list">
                            <li v-for="(img,index) in shareconfigure.enterprise_data">
                              <span>
                                <span v-if="img.icon_url==null"></span>
                                <img :src="img.icon_url" alt="icon" class="basicimg" v-else />
                              </span>
                              <span class="basicname">{{img.zh_name}}</span>
                            </li>
                            <div style="clear:both;"></div>
                          </ul>
                        </li>
                        <li
                          v-for="(item_text,index) in shareconfigure.information_data"
                          class="house_intro"
                        >
                          <h3 class="title">房源介绍</h3>
                          <p class="intro">{{item_text.detail}}</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
            <div class="loginShare_box" v-if="showdialog == 1">
              <div class="arrow_up"></div>
              <div class="loginDialog">
                <h3 class="title">登入后与业主沟通</h3>
                <el-form :model="loginForm" class="loginForm" :labelPosition="left">
                  <el-row>
                    <el-col span="24">
                      <el-form-item label="手机号：">
                        <el-input v-model="loginForm.mobile" placeholder="请输入手机号" style="width:210px;margin-bottom:15px;"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="24">
                      <el-form-item label="验证码：">
                        <el-input v-model="loginForm.pwdCode" class="input_text" style="width:210px;">
                          <el-button slot="suffix" v-show="show" class="count" size="mini" @click="send(3)" style="height:40px;margin-right:-5px;">发送验证码</el-button>
                          <span slot="suffix" v-show="!show" class="counts">{{count}} s</span>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item>
                    <div class="footer">
                      <el-button type="default" class="cancle" @click="showdialog=false">取消</el-button>
                      <el-button @click="checksmscode" class="loginBtn">立即登入</el-button> 
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
           <div class="loginTran_box" v-if="showdialog == 2">
              <div class="arrow_up"></div>
              <div class="loginDialog">
                  <h3 class="title">登入后与业主沟通</h3>
                  <el-form :model="loginForm" class="loginForm" :labelPosition="left">
                    <el-row>
                      <el-col span="24">
                        <el-form-item label="手机号：">
                          <el-input v-model="loginForm.mobile" placeholder="请输入手机号" style="width:210px;margin-bottom:15px;"></el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-row>
                      <el-col span="24">
                        <el-form-item label="验证码：">
                          <el-input v-model="loginForm.pwdCode" class="input_text" style="width:210px;">
                            <el-button slot="suffix" v-show="show" class="count" size="mini" @click="send(3)" style="height:40px;margin-right:-5px;">发送验证码</el-button>
                            <span slot="suffix" v-show="!show" class="counts">{{count}} s</span>
                          </el-input>
                        </el-form-item>
                      </el-col>
                    </el-row>
                    <el-form-item>
                      <div class="footer">
                        <el-button type="default" class="cancle" @click="showdialog=false">取消</el-button>
                        <el-button @click="checksmscode" class="loginBtn">立即登入</el-button> 
                      </div>
                    </el-form-item>
                  </el-form>
                </div>
            </div>
        </div>
        <div class="housedetail_condition">
          <ul class="housedetail_container_box_condition_top">
            <li>
              <h2 class="room_type_title">传统办公空间</h2>
            </li>
            <div style="clear:both;"></div>
            <li style="float:right;">
              <ul v-if="conditionhouseinfo">
                <li style="float:right;font-size:30px;color:#ED4242;margin:-40px 10px 0px 0px;">
                  {{lowTranPrice}}
                  <span class="price" v-if="conditiontableData.length != 0">{{conditionhouseinfo.zh_name}}</span>
                </li>
                <!-- <li style="font-size:20px;color:#ED4242;margin:-40px 10px 0px 0px;" v-else>暂无房源</li> -->
                <div style="clear:both;"></div>
              </ul>
            </li>
            <div style="clear:both;"></div>
          </ul>

          <!-- 表格 -->
          <div class="table_box">
            <el-button class="recommandBtn" v-if="conditiontableData.length==0" @click="goChatP2P(2)">获取相关房源推荐</el-button>
            <el-table :data="conditiontableData" :header-cell-style="getRowClass" :row-style="rowStyle" row-key="id" empty-text="暂无房源"
              :expand-row-keys="expandsTran" :highlight-current-row="tranbg" @row-click="rowClickTran" @cell-mouse-enter="changeFormbg"  @cell-mouse-leave="refreshFormbg" style="min-height:220px;" class="table">
              <el-table-column label="照片" prop="src" align="center">
                <template slot-scope="scope">
                  <img :src="scope.row.house_picture[0]" class="head_pic" style="position:relative;width:60px;height:60px;"
                    v-if="scope.row.house_picture!=''"/>
                  <div style="position:absolute;left:25px;top:93px;" v-if="scope.row.house_picture !=''">
                    <img src="../../../assets/img/sousuo.png" alt style="height:12px;width:12px;vertical-align:middle"/>
                    <span style="font-size:12px;">查看更多</span>
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="品牌" prop="brand_logo" align="center" style="min-width:50px;font-size:14px;">
                <template slot-scope="scope">
                  <img :src="scope.row.brand_logo" class="head_pic" v-if="scope.row.brand_logo != ''"/>
                  <img src="../../../assets/img/brandlogo.png" alt class="head_pic" srcset v-if="scope.row.is_fangda==1"/>
                </template>
              </el-table-column>
              <el-table-column label="房型" prop="zh_type" align="center" style="width:60px;">
                <template slot-scope="scope">
                  <!-- <span v-if="scope.row.is_fangda == 1">房大参考价</span> -->
                  <span>{{scope.row.zh_type}}</span>
                </template>
              </el-table-column>
              <el-table-column label="窗户" prop="is_window" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_fangda == 1">—</span>
                  <span v-if="scope.row.is_fangda == 0 && scope.row.is_window == 1">有</span>
                  <span v-if="scope.row.is_fangda == 0 && scope.row.is_window == 0">无</span>
                </template>
              </el-table-column>
              <el-table-column label="面积" prop="house_area" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_fangda == 1">多种选择</span>
                  <span v-if="scope.row.is_fangda == 0">{{scope.row.house_area}}m²</span>
                </template>
              </el-table-column>
              <el-table-column label="人数" prop="person_num" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_fangda == 1">不限</span>
                  <span v-if="scope.row.is_fangda == 0 && scope.row.person_num == 0">不限</span>
                  <span
                    v-if="scope.row.is_fangda == 0 && scope.row.person_num != 0"
                  >{{scope.row.person_num}}人</span>
                </template>
              </el-table-column>
              <el-table-column label="优惠" prop="cheap_type" align="center">
                <template slot-scope="scope">
                  <span v-if="scope.row.is_fangda == 1">—</span>
                  <span
                    v-if="scope.row.is_fangda == 0 && scope.row.cheap_type!=''"
                    :style="TextStyle"
                  >{{scope.row.cheap_type}}</span>
                  <span
                    v-if="scope.row.is_fangda == 0 && scope.row.cheap_type==''"
                    :style="TextStyle"
                  >—</span>
                </template>
              </el-table-column>
              <el-table-column label="原价/一口价" prop="price" align="center" min-width="90">
                <template slot-scope="scope">
                  <div v-if="scope.row.discount_price != ''" class="price_con">
                    <ul class="price_con_left">
                      <li class="priceBox">
                        <span style="color:#141414;font-size:18px;text-decoration:line-through;text-decoration-color: #ED4242;">{{scope.row.price}}</span>
                        <span style="color:#141414;font-size:12px;" v-if="scope.row.price">{{scope.row.zh_name}}</span>
                      </li>
                      <li class="priceBox">
                        <span style="color:#ED4242;font-size:18px;" v-if="scope.row.discount_price!=''">{{scope.row.discount_price}}</span>
                        <span v-if="scope.row.discount_price!=''" style="color:#ED4242;font-size:12px;">{{scope.row.zh_name}}</span>
                      </li>
                      <li class="priceBox">
                        <span style="color:#4D4D4D;font-size:15px;" v-if="scope.row.m_price !=''">{{scope.row.m_price}}</span>
                        <span style="color:#4D4D4D;font-size:11px;" v-if="scope.row.m_price !=''">{{scope.row.m_unit}}</span>
                      </li>
                    </ul>
                    <div class="price_con_right">
                      <el-tooltip class="item" effect="dark" content="房大精选房源" placement="bottom">
                        <img src="https://images.zoomoffices.com/cnImages/icon/youxuan.png" alt="" v-if="scope.row.is_hot==1">
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="一口价" placement="bottom">
                        <img src="https://images.zoomoffices.com/cnImages/icon/yikoujia.png" alt="" v-if="scope.row.is_ykprice==1">   
                      </el-tooltip>
                    </div>
                  </div>
                  <div v-else class="price_con">
                    <ul class="price_con_left">
                      <li class="priceBox">
                        <span style="color:#141414;font-size:18px;" v-if="scope.row.price">{{scope.row.price}}</span> 
                        <span style="color:#141414;font-size:12px;" v-if="scope.row.price">{{scope.row.zh_name}}</span>
                      </li>
                      <li class="priceBox">
                        <span style="color:#4D4D4D;font-size:15px;" v-if="scope.row.m_price">{{scope.row.m_price}}</span>
                        <span style="color:#4D4D4D;font-size:11px;" v-if="scope.row.m_price">{{scope.row.m_unit}}</span>
                      </li>
                    </ul>
                    <div class="price_con_right">
                      <p class="priceBox">
                      <el-tooltip class="item" effect="dark" content="房大精选房源" placement="bottom">
                        <img src="https://images.zoomoffices.com/cnImages/icon/youxuan.png" alt="" v-if="scope.row.is_hot==1">
                      </el-tooltip>
                      <el-tooltip class="item" effect="dark" content="一口价" placement="bottom">
                        <img src="https://images.zoomoffices.com/cnImages/icon/yikoujia.png" alt="" v-if="scope.row.is_ykprice==1">   
                      </el-tooltip>
                    </p>
                    </div>
                  </div>
                </template>
              </el-table-column>
              <el-table-column type="expand">
                <template slot-scope="props">
                  <div class="collpase">
                    <div class="box_collpase_left">
                      <div
                        class="traditionLeft"
                        v-if="props.row.house_picture.length!=0"
                        @click="houseimglunbo(props.row)"
                      >
                        <img :src="props.row.house_picture[0]" alt="房源图片" srcset class="houseimg" />
                        <img src="../../../assets/img/radiu_left.png" class="zuo" />
                        <img src="../../../assets/img/radiu_right.png" class="you" />
                      </div>
                      <el-button
                        class="housebtn"
                        @click="traditionVR(props.row.house_VR_url)"
                        v-if="props.row.house_VR_url"
                      >VR看房</el-button>
                    </div>
                    <div class="box_collpase_right">
                      <ul v-if="conditionconfigure" class="box_collpase_right_list">
                        <li
                          v-for="(time,indesx) in conditionconfigure.information_data"
                          class="listbox"
                        >
                          <ul class="taglist">
                            <li>
                              <p>免租时间：{{time.free_rent}}</p>
                              <p v-if="time.is_all==0">全包：否</p>
                              <p v-if="time.is_all==1">全包：是</p>
                              <p v-if="time.is_24hours==0">24小时进出：否</p>
                              <p v-if="time.is_24hours==1">24小时进出：是</p>
                            </li>
                            <li>
                              <p>最短租期：{{time.min_rent_duration}}月</p>
                              <p>装修情况：{{time.decoration_data}}</p>
                            </li>
                            <li>
                              <p v-if="time.deposit">押金：{{time.deposit}}</p>
                              <p v-else>押金：{{time.deposit}}</p>
                              <p v-if="time.is_furniture==0">家具：无</p>
                              <p v-if="time.is_furniture==1">家具：有</p>
                            </li>
                            <li>
                              <p v-if="time.property_fee == 0.0">物业费：未知</p>
                              <p v-else>物业费：{{time.property_fee}} 元/每月</p>
                              <p>座向：{{time.orientation_data}}</p>
                            </li>
                          </ul>
                        </li>
                        <li class="infrastructure" v-if="conditionconfigure.Infrastructure_data">
                          <h3 class="title">基础设施</h3>
                          <ul class="infrastructuretag">
                            <li v-for="(basic,i) in conditionconfigure.Infrastructure_data">
                              <span v-if="basic.icon_url==null"></span>
                              <div v-else>
                                <img :src="basic.icon_url" alt="icon" class="basicimg" />
                                <span class="basicname">{{basic.zh_name}}</span>
                              </div>
                            </li>
                            <div style="clear:both;"></div>
                          </ul>
                        </li>
                        <li class="enterprise_data" v-if="conditionconfigure.enterprise_data">
                          <h3 class="title">企业服务</h3>
                          <ul class="enterprise_data_list">
                            <li v-for="(service,num) in conditionconfigure.enterprise_data">
                              <span v-if="service.icon_url==null"></span>
                              <div v-else>
                                <img :src="service.icon_url" alt class="enterpriseimg" />
                                <span class="enterprisename">{{service.zh_name}}</span>
                              </div>
                            </li>
                            <div style="clear:both;"></div>
                          </ul>
                        </li>
                        <li
                          v-for="(text,indx) in conditionconfigure.information_data"
                          class="house_intro"
                        >
                          <h3 class="title">房源介绍</h3>
                          <p class="intro">{{text.detail}}</p>
                        </li>
                      </ul>
                    </div>
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>

        <div class="buildingintro">
          <div class="intro_box">
            <h2 class="title">楼盘介绍</h2>
            <p class="intro" v-if="houselists.zh_detail">{{houselists.zh_detail}}</p>
            <p class="intro" v-else>暂无相关介绍</p>
            <ul class="introlist">
              <li>
                <div>
                  <p v-if="houselists.parking_on_num!=0">车位(地上)：{{houselists.parking_on_num}}个</p>
                  <p v-if="houselists.parking_on_num==0">车位(地上)：未知</p>
                  <p v-if="houselists.layers==0">层数：未知</p>
                  <p v-else>层数：{{houselists.layers}}层</p>
                </div>
              </li>
              <li>
                <div>
                  <p v-if="houselists.parking_under_num == 0">车位(地下)：未知</p>
                  <p v-else>车位(地下)：{{houselists.parking_under_num}}个</p>
                  <p v-if="houselists.floor_height == 0">层高：未知</p>
                  <p v-else>层高：{{houselists.floor_height}}米</p>
                </div>
              </li>
              <li>
                <div>
                  <p v-if="houselists.is_barrier_free==0">无障碍设施：无</p>
                  <p v-else-if="houselists.is_barrier_free==1">无障碍设施：有</p>
                  <p v-if="houselists.build_time == 0">竣工时间：未知</p>
                  <p v-else>竣工时间：{{houselists.build_time}}年</p>
                </div>
              </li>
              <li>
                <div>
                  <p v-if="houselists.is_airconditioner==0">中央空调：无</p>
                  <p v-if="houselists.is_airconditioner==1">中央空调：有</p>
                </div>
              </li>
              <div style="clear:both"></div>
            </ul>
            <ul style="margin:-10px 0px 0px 30px;font-size: 14px;color: #666;">
              <li>
                <div>
                  <p v-if="houselists.zh_property_company">物业公司：{{houselists.zh_property_company}}</p>
                  <p v-else>物业公司：未知</p>
                </div>
              </li>
            </ul>
          </div>
          <div class="componany">
            <h2 class="title">入驻企业</h2>
            <ul class="componanylist">
              <li v-for="(tag,index) in houselists.building_company" :key="index">
                <img :src="tag.company_logo" alt class="componanyimg" />
              </li>
            </ul>
          </div>
        </div>
      </div>

      <!-- 右侧表单 -->
      <div class="choose_room_type_container" v-if="ruleForm">
        <div class="selected_box" :class="{ isFixed: SelectBarFixed, isAbsolute: hasAbso}" id="officespace2">
          <div class="direct_owner"  style="position:relative">
            <h2 class="room_type_title">直联业主</h2>
            <ul class="owner_intro_box">
              <li class="owner_intro_text" v-if="ruleForm.ownerinfo.ownername != ''">
                <img src="../../../assets/img/noowner.png" alt class="owner_img" style="border:1px solid #E4E4E4"
                  v-if="ruleForm.ownerinfo.brand_logo == ''"/>
                <img :src="ruleForm.ownerinfo.brand_logo" alt class="owner_img" v-else />
                <div class="owner_box">
                  <!-- <p class="ownername" v-if="ruleForm.brand_name== ''">房源业主</p> -->
                  <p class="ownername">{{ruleForm.brand_name}}</p>
                </div>
              </li>
              <!-- contact_owner -->
              <li class="owner_intro_text" v-else>
                <div class="noinfobox">
                  <img src="../../../assets/img/contact_owner.png" alt srcset class="noinfoimg" />
                  <img src="../../../assets/img/zhishishou.png" style alt class="zhishishou" />
                  <span class="ownerText">点击左侧房源直联业主</span>
                </div>
              </li>

              <li class="order_time">
                <el-date-picker v-model="visitTime" type="datetime" value-format="timestamp" placeholder="请选择日期时间" :picker-options="pickerOptions"
                  class="chooseTime" :disabled="showbtn" style="border:none;"></el-date-picker>
                <el-button @click="FetchAddappointment" :class="showbtn == true ? 'disBtn':'orderBtn'" :disabled="showbtn">一键约看</el-button>
              </li>
              <div style="clear:both;"></div>
              <li class="btn_communication_box">
                <el-button class="btn_communication" @click="goChatP2P(3)">直联业主</el-button>
                <el-button type="default" :class="showbtn == true ? 'btn_collects':'btn_collect'"
                  @click="AddCollection"  :disabled="showbtn" v-if="is_favorite == 0">
                  <img src="../../../assets/img/shoucang.png" alt style="margin:0px 10px 0px 0px" />收藏
                </el-button>
                <button v-if="is_favorite == 1" class="shoucangBtn" @click="DeleteCollecting" @mouseenter="changeBtnText"
                @mouseleave="ResetBtnText">
                  <img src="../../../assets/img/ysc.png" alt style="margin:0px 10px 0px 0px"/>已收藏
                </button>
              </li>
            </ul>
            <div class="loginDialogs_box" v-if="showdialog == 3">
              <div class="arrow_up"></div>
              <div class="loginDialog">
                <h3 class="title">登入后与业主沟通</h3>
                <el-form :model="loginForm" class="loginForm" :labelPosition="left">
                  <el-row>
                    <el-col span="24">
                      <el-form-item label="手机号：">
                        <el-input v-model="loginForm.mobile" placeholder="请输入手机号" style="width:210px;margin-bottom:15px;"></el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-row>
                    <el-col span="24">
                      <el-form-item label="验证码：">
                        <el-input v-model="loginForm.pwdCode" class="input_text" style="width:210px;">
                          <el-button slot="suffix" v-show="show" class="count" size="mini" @click="send(3)" style="height:40px;margin-right:-5px;">发送验证码</el-button>
                          <span slot="suffix" v-show="!show" class="counts">{{count}} s</span>
                        </el-input>
                      </el-form-item>
                    </el-col>
                  </el-row>
                  <el-form-item>
                    <div class="footer">
                      <el-button type="default" class="cancle" @click="showdialog=false">取消</el-button>
                      <el-button @click="checksmscode" class="loginBtn">立即登入</el-button> 
                    </div>
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
          <div class="choose_room">
            <div class="room_type_title" @click="showFormBox">
              <img src="../../../assets/img/jsq.png" alt="" srcset="" class="jsqImg">
              <span class="jsq">房大计算器</span>
              <i class="iconfont icon-arrowdown" v-if="showfrom == false" style="margin-left:120px;"></i>
              <i class="iconfont icon-arrowon" v-else style="margin-left:120px;"></i>
            </div>
            <ul class="room_type_detail_box" v-if="showfrom == 1">
              <li class="room_type_detail">
                <span>空间类型</span>
                <span class="field">{{ruleForm.spacetype}}</span>
              </li>
              <li class="room_type_detail" v-if="changeNum">
                <span>人数</span>
                <span class="field">
                  <el-input-number v-model="ruleForm.people_number" :min="0" style="margin-right:3px;" size="mini"
                    @change="FetchRoomcompute" v-if="ruleForm.is_fangda == 0" :disabled="perDisable"></el-input-number>
                  <el-input-number v-model="ruleForm.people_number" :min="0" style="margin-right:3px;" size="mini"
                    @change="FetchRoomcompute" v-else :disabled="perDisable"></el-input-number>人
                </span>
              </li>
              <li class="room_type_detail" v-else>
                <span>面积</span>
                <span class="field">
                  <el-input-number v-model="ruleForm.square" :min="0" style="margin-right:3px;" size="mini" @change="FetchRoomcompute"
                    v-if="ruleForm.is_fangda == 0" :disabled="perDisable"></el-input-number>
                  <el-input-number v-model="ruleForm.square" :min="0" style="margin-right:3px;" size="mini" @change="FetchRoomcompute"
                    v-else :disabled="perDisable"></el-input-number>m²
                </span>
              </li>
              <li class="room_type_detail">
                <span>日期</span>
                <span class="field">
                  <el-date-picker v-model="ruleForm.date_start_duration" type="monthrange" size="mini" value-format="yyyy-MM-dd" range-separator="至"
                    start-placeholder="开始日期" end-placeholder="结束日期" @blur="FetchRoomcompute" style="width:200px;margin:-5px 0px 0px -65px;"
                  ></el-date-picker>
                </span>
              </li>
            </ul>
            <div class="couponbox" v-if="showfrom == 1">
              <p>
                <span>租金</span>
                <span class="field" :class="TextColor == true ? 'textColor':''" v-if="this.type == 1" style="color:#000">{{ruleForm.rentmoney}}元 / 人 / 月</span>
                <span class="field" :class="TextColor == true ? 'textColor':'' " v-if="this.type == 2" style="color:#000">{{ruleForm.rentmoney}}元 / m² / 日</span>
              </p>
              <p v-if="coupon">
                <span>优惠租金</span>
                <span class="field" :class="TextColor == true ? 'textColor':''" v-if="coupon.preferential">￥{{coupon.preferential}}</span>
                <span class="field" :class="TextColor == true ? 'textColor':''" v-else>暂无优惠</span>
              </p>
              <p v-if="coupon">
                <span>总价</span>
                <span class="field">
                  <span v-if="coupon.before_discount&&coupon.before_discount!=coupon.total" :class="TextColor == true ? 'textColors':'textColor'">￥{{coupon.before_discount}}</span>
                  <span v-if="coupon.total" :class="TextColor == true ? 'textColor':''">￥{{coupon.total}}</span>
                </span>
              </p>
            </div>
          </div>
        </div>
        <!-- <div class="loginDialogs_box" v-if="showdialog == 3">
          <div class="arrow_up"></div>
          <div class="loginDialog">
            <h3 class="title">登入后与业主沟通</h3>
            <el-form :model="loginForm" class="loginForm" :labelPosition="left">
              <el-row>
                <el-col span="24">
                  <el-form-item label="手机号：">
                    <el-input v-model="loginForm.mobile" placeholder="请输入手机号" style="width:210px;margin-bottom:15px;"></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col span="24">
                  <el-form-item label="验证码：">
                    <el-input v-model="loginForm.pwdCode" class="input_text" style="width:210px;">
                      <el-button slot="suffix" v-show="show" class="count" size="mini" @click="send" style="height:40px;margin-right:-5px;">发送验证码</el-button>
                      <span slot="suffix" v-show="!show" class="counts">{{count}} s</span>
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-form-item>
                <div class="footer">
                  <el-button type="default" class="cancle" @click="showdialog=false">取消</el-button>
                  <el-button @click="checksmscode" class="loginBtn">立即登入</el-button> 
                </div>
              </el-form-item>
            </el-form>
          </div>
        </div> -->
      </div>
    </div>
    <!-- 推荐房源 -->
    <div class="recommand_box">
      <h2 class="title">推荐房源</h2>
      <swiper
        :options="swiperOptionrecomm"
        class="recommandlist"
        ref="mySwiper"
        v-if="recommandlist.length > 0"
      >
        <swiper-slide v-for="(item,index) in recommandlist" :key="index" class="slides">
          <div>
            <img :src="item.path" alt class="buildingimg" v-if="item.path" />
            <img src="../../../assets/img/nocontent.png" alt class="buildingimg" v-else />
            <div class="buildingprice">
              <span class="price">{{item.price}}</span>
              <span class="monthly">{{item.unit_name}}</span>
            </div>
            <div class="footer">
              <p class="building">{{item.zh_name}}</p>
              <p class="addr" v-if="item.zh_addr">{{item.zh_addr}}</p>
              <p v-else class="addr">暂无详细地址</p>
            </div>
          </div>
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev">
          <img src="../../../assets/img/radiu_left.png" alt srcset />
        </div>
        <div class="swiper-button-next" slot="button-next">
          <img src="../../../assets/img/radiu_right.png" alt srcset />
        </div>
      </swiper>
    </div>
    <el-dialog :visible.sync="dialogShow" width="639px" :close-on-click-modal="false" center>
      <div style="text-align:center;font-size:20px;">{{showMessage}}</div>
      <button class="dialogReject3" slot="footer" @click="dialogShow=false" style="width:427px;height:40px;font-size:20px;border:0;background:rgba(255,227,0,1);letter-spacing:1px;">确定</button>
    </el-dialog>
    <el-dialog :visible.sync="dialogVR" center :close-on-click-modal="false" width="1320px;margin-top:10vh">
      <div style="width：1280px;height:720px;margin:0 auto;">
        <iframe :src="vrUrl" height="720" width="1280" frameborder="0"></iframe>
      </div>
    </el-dialog>
    <div style="height:466.67px;width:700px;margin:auto;" class="yule" :style="{display:isinout}">
      <swiper :options="swiperOption5" ref="swiperO5" v-if="houselunbo.length>0" style="width:700px;">
        <swiper-slide v-for="(item,index) in houselunbo" :key="index" style="position:relative;">
          <img :src="item" alt class="house_img" style="z-index:10;" />
        </swiper-slide>
        <div class="swiper-button-prev" slot="button-prev" style="z-index:1000;backgroundImage:none">
          <img src="../../../assets/img/radiu_left.png" alt srcset />
        </div>
        <div class="swiper-button-next" slot="button-next" style="z-index:1000;backgroundImage:none">
          <img src="../../../assets/img/radiu_right.png" alt srcset style="margin: -10px 0px 0px -30px;"/>
        </div>
      </swiper>
    </div>
    <div class="inout" :style="{display:isinout}" @click="deletewindow"></div>
    <el-dialog :visible.sync="dialogContacts" width="639px"  :modal-append-to-body="false" center >
      <div style="text-align:center;font-size:20px;">该账号是业主账号，是否前往业主端</div>
      <div slot="footer"> 
          <button @click="dialogContacts=false" style="width:200px;height:40px;font-size:20px;border:0;background:rgba(255,227,0,1);letter-spacing:1px;margin-right:10px">取消</button>
          <button @click="moveToyz" style="width:200px;height:40px;font-size:20px;border:0;background:rgba(255,227,0,1);letter-spacing:1px;">确定</button>
      </div>
  </el-dialog>
  </div>

</template>
<script>

import {getHouseDetail, getShareDetail,getAgentUserinfo,HouseCollection, RecommendHouse,HouseBooking,getRoomDetail,Addappointment,
  getcompute,CreateGroup,CreateP2P,getCollection,deleteCollection,checkUserType} from "@/api/office";
import { getsmscode,loginInstead,getchecksmscode} from "@/api/homepage";
import { mapState } from "vuex";
import { setCookie, getCookie,clearBackgroundColor } from "@/api/login";
var vm;
const TIME_COUNT = 60; //更改倒计时时间
export default {
  metaInfo: {
    title: "房源详情",
    meta: [
      {
        name: "keywords",
        content: "办公,租赁,房源,办公空间租赁,房屋出租,办公空间出租"
      },
      {
        name: "description",
        content: "房源详情"
      }
    ]
  },
  data() {
    return {
      sharebg:false,
      tranbg:false,
      bgIndex:0,
      showfrom:false,
      isinout: "none",
      TextColor: false,
      expands: [], // 要展开的行，数值的元素是row的key值
      expandsTran: [],
      people_number: 0,
      houseid: "",
      visitTime: "",
      changeNum: false,
      building_id: this.$route.params.id,
      city_id: this.$route.params.cityid,
      currentIndex: 0,
      ind: 0,
      current: 0,
      unit_name: "",
      imgarr: [],
      shareOfficeSpace: [],
      accid: "",
      acctoken: "",
      accname: "",
      accimg: "",
      landlord_uid: "",
      houseinfo: {
        zh_name: "",
        price: "",
        unit_name: "",
        vr_path: ""
      },
      conditionhouseinfo: {
        price: "",
        zh_name: ""
      },
      vrUrl: "",
      coupon: {
        before_discount: "",
        preferential: "",
        total: ""
      },
      shareconfigure: {}, // 共享办公配置
      conditionconfigure: {}, // 共享办公配置
      houselists: {},
      //共享办公折叠面板
      sharetableData: [],
      //传统办公折叠面板
      conditiontableData: [],
      // 选择房型
      ruleForm: {
        num: "",
        date_start_duration: "",
        date_end_duration: "",
        spacetype: "",
        rentmoney: "",
        preferential: "",
        people_number: "",
        brand_name: "",
        square: "",
        ordertime: "2018/04/28 17:08:23",
        brokerlist: [],
        is_fangda: "",
        ownerinfo: {
          ownername: "",
          ownerphone: "",
          brand_logo: ""
        },
        fee: "",
        imaccount: "",
        imtoken: ""
      },
      type: 1,
      ambitusindex: 0,
      ambitustext: "银行",
      ambitusimg: "",
      ambituslist: [
        {
          index: 0,
          src: require("../../../assets/img/bank.png"),
          text: "银行"
        },
        {
          index: 1,
          src: require("../../../assets/img/food.png"),
          text: "餐饮"
        },
        {
          index: 2,
          src: require("../../../assets/img/bus.png"),
          text: "公交"
        },
        {
          index: 3,
          src: require("../../../assets/img/hotel.png"),
          text: "酒店"
        }
      ],
      recommandlist: [],
      // 顶部轮播
      swiperOptionTop: {
        spaceBetween: 10,
        loop: true,
        loopedSlides: 4 //looped slides should be the same
        // noSwiping:true,
      },
      swiperOptionThumbs: {
        direction: "vertical",
        spaceBetween: 10,
        slidesPerView: 4,
        touchRatio: 0.2,

        simulateTouch : true,
        touchRatio : 0,
        // allowTouchMove: false,

        // noSwiping:false,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        },
        loopedSlides: 4, //looped slides should be the same
        slideToClickedSlide: true,
        loopFillGroupWithBlank: true
      },
      showbtn: true,
      lunboUrl: "",
      swiperOption5: {
        slidesPerView: 1,
        spaceBetween: 1,
        touchRatio: 0.2,
        loopedSlides: 1,
        loop: true,
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },

      swiperOptionrecomm: {
        slidesPerView: 4,
        spaceBetween: 1,
        touchRatio: 0.2,
        loopedSlides: 4,
        loop: true,
        on: {
          click: function() {
            vm.fetchrecommondbuilding(this);
          }
        },
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev"
        }
      },
      tname: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() < Date.now() - 8.64e7;
        }
      },
      dialogShow: false,
      showMessage: "",
      dialogVR: false,
      dialogbig: false,
      dialoglunbo: false,
      houselunbo: [],
      bigUrl: "",
      SelectBarFixed: false,
      hasAbso: false,
      perDisable: false,
      zyImg: require("../../../assets/img/zhuanyuan.png"),
      lowSharePrice: "",
      lowTranPrice: "",
      taglist:[
         {
          // src:require('../../assets/img/owners.png'),
          src:'https://images.zoomoffices.com/cnImages/icon/list-01.png',
          label:'真业主保证',
        },
        {
          // src:require('../../assets/img/commission.png'),
          src:'https://images.zoomoffices.com/cnImages/icon/list-02.png',
          label:'0服务费保证',
        },
        {
          src:"https://images.zoomoffices.com/cnImages/icon/list-03.png",
          label:'不租贵保证',
        },
        {
          src:'https://images.zoomoffices.com/cnImages/icon/list-04.png',
          label:'90秒快速响应',
        },
      ],
      loginForm: {
        mobile: '',
        pwdCode: '',
      },
      // 登录弹窗
      show: true, // 初始启用按钮
      count: "", // 初始化次数
      timer: null,
      showdialog:-1,
      is_favorite:0,
      yscImg:require('../../../assets/img/ysc.png'),
      shoucangImg:require('../../../assets/img/shoucang.png'),
      dialogContacts:false,
      groupType:0,
      groupUnit:'',
      groupPrice:'',
    };
  },
  watch: {
    $route() {
      this.recommandlist = [];
      this.FetchRecommendHouse(); //当对象改变，执行操作获取新数据
    }
  },
  created() {
    vm = this;
    this.$root.goIndex = 1;
  },
  methods: {
    deletewindow() {
      this.isinout = "none";
    },
    houseimglunbo(item) {
      this.houselunbo = [];
      for (let i = 0; i < item.house_picture.length; i++) {
        if (item.house_picture[i] == "") {
          item.house_picture.splice(i, 1);
        }
        this.houselunbo = item.house_picture;
      }
      this.isinout = "block";
    },
    changelunbo(index) {
      //轮播图点击换图
      this.lunboUrl = this.imgarr[index];
    },
    changebig2(item) {
      //放大图

      this.bigUrl = item;
      this.dialogbig = true;
    },
    changebig(vm) {
      //放大图
      let index = vm.clickedIndex - vm.activeIndex + vm.realIndex === this.shareOfficeSpace.length ? 0 : vm.clickedIndex - vm.activeIndex + vm.realIndex;
      if (index >= 0) {
        if (index > this.shareOfficeSpace.length) {
          this.bigUrl = this.shareOfficeSpace[
            index - this.shareOfficeSpace.length
          ];
          this.dialogbig = true;
        } else {
          this.bigUrl = this.shareOfficeSpace[index];
          this.dialogbig = true;
        }
      }
    },
    FetchHouseDetail() {
      // 房源详情
      var reqParams = {
        building_id: this.building_id
      };
      getHouseDetail(reqParams)
        .then(res => {
          if (res.data.code == 0) {
            this.houselists = res.data.data;
            let str = res.data.data.zh_name;
            this.tname += str;
            this.imgarr = res.data.data.building_banners;
            this.swiperOptionTop.loopedSlides =
              res.data.data.building_banners.length;
            this.swiperOptionThumbs.loopedSlides =
              res.data.data.building_banners.length;
            this.lunboUrl = res.data.data.building_banners[0];
            setTimeout(() => {
              this.initBMap();
            }, 500);
          }
        })
        .catch(error => {
          this.$message.error("查询房源周边等级失败！请重试！");
        });
    },

    FetchBuildingDetail() {
      // 共享
      var reqParams = {
        building_id: this.building_id
      };
      getShareDetail(reqParams)
        .then(res => {
          if (res.data.code == 0) {
            this.sharetableData = res.data.data.share_house.data_list;
            this.houseinfo.unit_name = res.data.data.share_house.unit_name;
            this.houseinfo.zh_name = res.data.data.share_house.zh_name;
            this.houseinfo.price = res.data.data.share_house.price;
            this.houseinfo.vr_path = res.data.data.share_house.vr_path;
            this.conditiontableData = res.data.data.tradition_house.data_list;
            this.conditionhouseinfo.zh_name = res.data.data.tradition_house.unit_name;
            this.conditionhouseinfo.price = res.data.data.tradition_house.price;
            this.shareOfficeSpace = res.data.data.share_house.house_banners;
            this.lowSharePrice = res.data.data.share_house.price;
            this.lowTranPrice = res.data.data.tradition_house.price;
          }
        })
        .catch(error => {
        });
    },
    
    rowClickShare(row, event, column) {
      this.groupType = 1;
      this.tranbg=false;
      this.sharebg=true;
      this.expandsTran = [];
      this.TextColor = true;
      this.showbtn = false;
      this.groupUnit = row.person_num;
      this.groupPrice = row.final_price;
      // this.ruleForm.fee = row.cheap_type;
      this.ruleForm.fee = row.property_fee;
      // this.ruleForm.brand_name = row.brand_name;
      this.houseid = row.id;
      this.ruleForm.is_fangda = row.is_fangda;
      this.bgIndex=1;
      var form = document.getElementsByClassName('direct_owner');
      form[0].style.backgroundColor  = '#D2EAF5';

      if(getCookie('wangyiaccid') && window.localStorage.getItem("token")){
        this.FetchCollecting();
      }
      Array.prototype.remove = function(val) {
        let index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (this.expands.indexOf(row.id) < 0) {
        this.expands = [];
        this.expands.push(row.id);
        (this.type = 1), (this.ruleForm.spacetype = row.zh_type);
        this.ruleForm.rentmoney = row.price;
        this.ruleForm.preferential = row.cheap_type;
        this.changeNum = true;
        this.houseid = row.id;
        this.ruleForm.ownerinfo.ownername = row.contact_name;
        this.ruleForm.ownerinfo.ownerphone = row.contact_phone;
        this.ruleForm.ownerinfo.brand_logo = row.brand_logo;
        this.ruleForm.imaccount = row.im_account;
        this.ruleForm.imtoken = row.token;
        this.accid = row.im_account;
        this.acctoken = row.token;
        this.accname = "房大_" + row.contact_name;
        this.accimg = row.face_url;
        this.landlord_uid = row.created_by_uid;
        if (this.ruleForm.is_fangda == 1) {
          this.perDisable = false;
          if (this.ruleForm.people_number) {
          } else {
            this.ruleForm.people_number = 0;
          }
        } else {
          this.perDisable = true;
          if (row.person_num == "0.0") {
            this.perDisable = false;
            this.ruleForm.people_number = 0;
          } else {
            this.ruleForm.people_number = row.person_num;
          }
        }
        var reqParams = {
          house_id: this.houseid
        };
        getRoomDetail(reqParams).then(res => {
          if (res.data.code == 0) {
            this.shareconfigure = res.data.data;
            this.ruleForm.fee = res.data.data.information_data[0].property_fee;
            this.ruleForm.brand_name = res.data.data.landlord_userInfo.brand_name;
            if (this.ruleForm.fee) {

            } else {
              this.ruleForm.fee = 0;
            }
            if (this.houseid &&  this.type && (this.ruleForm.people_number == 0 || this.ruleForm.people_number) && (this.ruleForm.fee == 0 || this.ruleForm.fee) &&
              this.ruleForm.date_start_duration.length) {
              this.FetchRoomcompute();
            }
          }
        });
      } else {
        this.expands.remove(row.id);
      }
    },
    
    changeFormbg(){
      var form = document.getElementsByClassName('direct_owner');
      form[0].style.backgroundColor  = '#D2EAF5';
    },
    refreshFormbg(){
      if(this.bgIndex==0){
        var form = document.getElementsByClassName('direct_owner');
        form[0].style.backgroundColor  = '#fff';
      }else{
        var form = document.getElementsByClassName('direct_owner');
        form[0].style.backgroundColor  = '#D2EAF5';
      }
      
    },
    // defaultBg(){
    //   var form = document.getElementsByClassName('direct_owner');
    //   form[0].style.backgroundColor  = '#fff';
    // },

    rowClickTran(row, event, column) {
      this.groupType = 2;
      this.tranbg=true;
      this.sharebg=false;
      var that = this;
      this.bgIndex=1;
      this.expands = [];
      // this.ruleForm.fee = row.cheap_type;
      this.ruleForm.fee = row.property_fee;
      this.TextColor = true;
      this.showbtn = false;
      this.houseid = row.id;
      this.groupUnit = row.house_area;
      this.groupPrice = row.final_price;
      // this.ruleForm.brand_name = row.brand_name;
      this.ruleForm.is_fangda = row.is_fangda;
      var form = document.getElementsByClassName('direct_owner');
      form[0].style.backgroundColor  = '#D2EAF5';

      if(getCookie('wangyiaccid') && window.localStorage.getItem("token")){
        this.FetchCollecting();
      }
      Array.prototype.remove = function(val) {
        let index = this.indexOf(val);
        if (index > -1) {
          this.splice(index, 1);
        }
      };
      if (this.expandsTran.indexOf(row.id) < 0) {
        this.expandsTran = [];
        this.expandsTran.push(row.id);
        (this.type = 2), (this.ruleForm.spacetype = row.zh_type);
        this.ruleForm.rentmoney = row.price;
        this.ruleForm.preferential = row.cheap_type;
        this.changeNum = false;
        this.houseid = row.id;
        this.ruleForm.ownerinfo.ownername = row.contact_name;
        this.ruleForm.ownerinfo.ownerphone = row.contact_phone;
        this.ruleForm.ownerinfo.brand_logo = row.brand_logo;
        this.ruleForm.imaccount = row.im_account;
        this.ruleForm.imtoken = row.token;
        this.accid = row.im_account;
        this.acctoken = row.token;
        this.accname = "房大_" + row.contact_name;
        this.accimg = row.face_url;
        this.landlord_uid = row.created_by_uid;
        var reqParams = {
          house_id: this.houseid
        };
        if (this.ruleForm.is_fangda == 1) {
          this.perDisable = false;
          if (this.ruleForm.square) {
          } else {
            this.ruleForm.square = 0;
          }
        } else {
          this.perDisable = true;
          if (row.house_area == "0.0") {
            this.perDisable = false;
            this.ruleForm.square = 0;
          } else {
            this.ruleForm.square = row.house_area;
          }
        }
        getRoomDetail(reqParams).then(res => {
          if (res.data.code == 0) {
            this.conditionconfigure = res.data.data;
            this.ruleForm.fee = res.data.data.information_data[0].property_fee;
            this.ruleForm.brand_name = res.data.data.landlord_userInfo.brand_name;
            if (this.ruleForm.fee) {
            } else {
              this.ruleForm.fee = 0;
            }
            if (this.houseid && this.type && (this.ruleForm.square == 0 || this.ruleForm.square) && (this.ruleForm.fee == 0 || this.ruleForm.fee) &&
              this.ruleForm.date_start_duration.length) {
              this.FetchRoomcompute();
            }
          }
        });
      } else {
        this.expandsTran.remove(row.id);
      }
    },

    FetchRoomcompute() {
      for (let i = 0; i < this.ruleForm.date_start_duration.length; i++) {
        var startTime = this.ruleForm.date_start_duration[0];
        var endTime = this.ruleForm.date_start_duration[1];
      }
      if (this.type == 1) {
        var reqParams = {
          house_id: this.houseid,
          type: this.type,
          people_number: this.ruleForm.people_number,
          date_start_duration: startTime,
          date_end_duration: endTime,
          fee: Number(this.ruleForm.fee)
        };
        getcompute(reqParams).then(res => {
          if (res.data.code == 0) {
            this.coupon = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        });
      } else if (this.type == 2) {
        var reqParams = {
          house_id: this.houseid,
          type: this.type,
          square: this.ruleForm.square,
          date_start_duration: startTime,
          date_end_duration: endTime,
          fee: Number(this.ruleForm.fee)
        };
        getcompute(reqParams).then(res => {
          if (res.data.code == 0) {
            this.coupon = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },

    FetchAddappointment() {
      // 一键约看
      let token = window.localStorage.getItem("token");
      let accid = getCookie('wangyiaccid')
      if (!accid) {
        this.dialogShow = true;
        this.showMessage = "登录之后才能约看哦";
      } else {
        var reqParams = {
          token: token,
          houseId: this.houseid,
          visitTime: this.visitTime
        };
        Addappointment(reqParams).then(res => {
          if (res.data.code == 0) {
            this.dialogShow = true;
            this.showMessage = "您的预约申请送达中，请耐心等待业主联系！";
            // this.$message.success('您的预约申请送达中，请耐心等待业主联系！')
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },

    AddCollection() {
      // 收藏房源
      let token = window.localStorage.getItem("token");
      let accid = getCookie('wangyiaccid')
      if (!accid) {
        this.dialogShow = true;
        this.showMessage = "登录之后才能收藏哦";
      } else {
        var reqParams = {
          token: token,
          houseId: this.houseid
        };
        HouseCollection(reqParams).then(res => {
          if (res.data.code == 0) {
            this.dialogShow = true;
            this.showMessage = "收藏成功！";
            this.FetchCollecting()
          } else {
            this.$message.error(res.data.msg);
          }
        });
      }
    },

    FetchCollecting(){
      if(getCookie('wangyiaccid') && window.localStorage.getItem("token")){
        let token = window.localStorage.getItem("token");
        var reqParams = {
          token: token,
          house_id: JSON.stringify(this.houseid)
        }
        getCollection(reqParams).then(res=>{
          if (res.data.code == 0) {
            this.is_favorite	= res.data.data.is_favorite;
          }else{
            this.is_favorite	= 0;
          }
        })
      }else{
        this.$message.error('请先登录！')
      }
    },

    DeleteCollecting(){
      let token = window.localStorage.getItem("token");
      var reqParams = {
        token: token,
        houseIds: JSON.stringify(this.houseid)
      }
      deleteCollection(reqParams).then(res=>{
        if (res.data.code == 0) {
          this.is_favorite	= 0;
          this.$message.success('已取消收藏！')
        } 
      })
    },

    changeBtnText(){
      var changehtml = '';
      changehtml += `<img src=${this.shoucangImg} style="margin-right:10px;"/>` + '取消收藏'
      document.getElementsByClassName('shoucangBtn')[0].innerHTML = changehtml;
    },
    ResetBtnText(){
      var Resethtml = '';
      Resethtml +=  `<img src=${this.yscImg} style="margin-right:10px;"/>`+ '已收藏'
      document.getElementsByClassName('shoucangBtn')[0].innerHTML = Resethtml;
    },

    FetchRecommendHouse() {
      // 推荐房源
      var reqParams = {
        building_id: this.building_id
      };
      RecommendHouse(reqParams)
        .then(res => {
          if (res.data.code == 0) {
            this.recommandlist = res.data.data;
          } else {
            this.$message.error(res.data.msg);
          }
        })
        .catch(error => {
          // this.$message.error('请求推荐房源失败!')
        });
    },

    showFormBox(){
      this.showfrom =! this.showfrom;
    },

    changebg(item, index) {
      this.ambitusindex = index;
      this.ambitustext = item.text;
      this.ambitusimg = item.src;
      this.initBMap(this.ambitustext, this.ambitusimg);
    },
    // 地图
    initBMap() {
      // 百度API功能调用
      var map = new BMap.Map("allmap");
      var point = new BMap.Point(this.houselists.lng, this.houselists.lat);
      map.centerAndZoom(point, 14);
      //创建一个圆
      var circle = new BMap.Circle(point, 2000, {
        fillColor: "blue",
        strokeWeight: 1,
        fillOpacity: 0.2,
        strokeOpacity: 0.3
      });
      // map.addControl(new BMap.NavigationControl()); // 添加平移缩放控件
      // map.addControl(new BMap.OverviewMapControl()); //添加缩略地图控件

      var address = this.ambitustext;
      var local = new BMap.LocalSearch(map, {
        renderOptions: { map: map, autoViewport: false }
      });
      local.searchNearby(address, point, 2000); // address 为传递的搜索文本
      local.disableFirstResultSelection();
      var label = new BMap.Label(this.houselists.zh_name, {
        offset: new BMap.Size(0, 0)
      });
      label.setStyle({
        background: "#FFE300",
        textAlign: "center",
        fontSize: "30px",
        border: "none",
        padding: "22px 23px"
      });

      label.setZIndex({ zIndex: 1 });

      map.enableScrollWheelZoom();
      map.addOverlay(circle);

      var myIcon = new BMap.Icon(
        require("./position_icon.png"),
        new BMap.Size(60, 60),
        {}
      );
      var marker2 = new BMap.Marker(point, { icon: myIcon }); // 创建标注
      map.addOverlay(marker2);
    },

    getRowClass({ row, column, rowIndex, columnIndex }) {
      if (rowIndex === 0) {
        return "background:#F9F9F9;font-size:14px;color:#141414;font-weight:bold;";
      } else {
        return "";
      }
    },
    rowStyle({ row, rowIndex }) {
      return "border: 1px solid #333;height:100px;";
    },

    fetchdata() {
      this.FetchHouseDetail();
    },
    fetchrecommondbuilding(lun) {
      let index = lun.clickedIndex - lun.activeIndex + lun.realIndex === this.recommandlist.length ? 0 : lun.clickedIndex - lun.activeIndex + lun.realIndex;
      if (index >= 0) {
        if (index > this.recommandlist.length) {
          this.imgarr = [];
          this.houselunbo = [];
          let building = this.recommandlist[index - this.recommandlist.length].building_id;
          let city = this.recommandlist[index - this.recommandlist.length].city_id;
          this.$router.push({ path: "/home/office/" + city + "/" + building });
          this.building_id = this.recommandlist[index - this.recommandlist.length].building_id;
          this.city_id = this.recommandlist[index - this.recommandlist.length].city_id;
          this.fetchdata();
          this.FetchBuildingDetail();
        } else {
          this.imgarr = [];
          this.houselunbo = [];
          let building = this.recommandlist[index].building_id;
          let city = this.recommandlist[index].city_id;
          this.$router.push({ path: "/home/office/" + city + "/" + building });
          this.building_id = this.recommandlist[index].building_id;
          this.city_id = this.recommandlist[index].city_id;
          this.fetchdata();
          this.FetchBuildingDetail();
        }
      }
    },
    shareVR() {
      this.dialogVR = true;
      this.vrUrl = this.houseinfo.vr_path;
    },
    traditionVR(value) {
      this.dialogVR = true;
      this.vrUrl = value;
    },

    goChatP2P(index) {
      if (!getCookie("wangyiaccid")) {
        this.showdialog = index;
      } else {
        if(this.landlord_uid == '' && window.localStorage.getItem("islogin") == true){
          setCookie("uuname", "专员1");
          setCookie("uuimg", this.zyImg);
          setCookie("username", window.localStorage.getItem("username"));
          setCookie("tokena", window.localStorage.getItem("token"));
          var account = getCookie("wangyiaccid");
          var pwd = getCookie("wangyitoken");
          setCookie("uid", account);
          setCookie("sdktoken", pwd);
          var reqParams = {
            token: window.localStorage.getItem("token"),
            client_uid: window.localStorage.getItem("cilentuid"),
            building_id: this.building_id
          };
          CreateP2P(reqParams).then(res => {
            if (res.data.code == 0) {
              let groupobj = res.data.data;
              let tid = groupobj.tid;
              setCookie("teamid", tid);
              setCookie("scene", "team");
              if (getCookie("teamid") && getCookie("wangyiaccid")) {
                setTimeout(() => {
                  var tempwindow = window.open("_blank");
                  tempwindow.location = window.location.protocol + "//" + window.location.hostname + "/im/chat/main.html";
                }, 500);
              }
            }else{
              this.$message.error(res.data.msg)
            }
          });
        }else{
          setCookie("uuid", this.accid);
          setCookie("uutoken", this.acctoken);
          setCookie("uuname", this.tname);
          setCookie("uuimg", this.accimg);
          setCookie("username", window.localStorage.getItem("username"));
          setCookie("tokena", window.localStorage.getItem("token"));
          var account = getCookie("wangyiaccid");
          var pwd = getCookie("wangyitoken");
          setCookie("uid", account);
          setCookie("sdktoken", pwd);
          if(!window.localStorage.getItem("token")) {
            
          } else if (this.landlord_uid == "") {
            this.$message.error("请先选择房源！");
          } else {
            var reqParams = {
              token: window.localStorage.getItem("token"),
              client_uid: window.localStorage.getItem("cilentuid"),
              building_id: this.building_id,
              landlord_uid: this.landlord_uid,
              type:this.groupType,
              unit:this.groupUnit,
              price:this.groupPrice,
            };
            CreateGroup(reqParams).then(res => {
              if (res.data.code == 0) {
                let groupobj = res.data.data;
                let tid = groupobj.tid;
                setCookie("teamid", tid);
                setCookie("scene", "team");
                if (getCookie("teamid")) {
                  setTimeout(() => {
                    var tempwindow = window.open("_blank");
                    tempwindow.location = window.location.protocol + "//" + window.location.hostname + "/im/chat/main.html";
                  }, 500);
                }
              }else{
                this.$message.error(res.data.msg)
              }
            });
          }
        }
        
      }
    },

    moveToyz(){
      var tempwindow=window.open('_blank');
      tempwindow.location=window.location.protocol+'//'+'yz.zoomoffices.com';
      this.dialogContacts=false;
    },

    handleScroll() {
      if (this.houselists.zh_name != "") {
        if ( document.getElementById("officespace2") && document.getElementById("officespace2").offsetHeight) {
          var leftcontent = document.getElementById("officespace2")
            .offsetHeight;
        }

        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
        if (scrollTop > 700) {
          this.SelectBarFixed = true;
          this.hasAbso = false;
        }
        if ( leftcontent && scrollTop > document.documentElement.scrollHeight - leftcontent - 620 - 570) {
          this.hasAbso = true;
          this.SelectBarFixed = false;
        }
        if (scrollTop < 700) {
          this.SelectBarFixed = false;
          this.hasAbso = false;
        }
      }
    },

    // 检测用户类型
    checkUser(){
      var reqParams = {
        mobile:this.loginForm.mobile
      }
      checkUserType(reqParams).then(res=>{
        if(res.data.code == 4){
          this.dialogContacts=true;
        }
      })
    },

    // 获取验证码
    send(type) {
       var reqParams = {
        prefix:'+86',
        mobile:this.loginForm.mobile,
        type:type
      }
      getsmscode(reqParams).then(res=>{
         if (res.data.code == 0) {
            if (!this.timer) {
              this.count = TIME_COUNT;
              this.show = false;
              this.timer = setInterval(() => {
                if (this.count > 0 && this.count <= TIME_COUNT) {
                  this.count--;
                } else {
                  this.show = true;
                  clearInterval(this.timer); // 清除定时器
                  this.timer = null;
                }
              }, 1000);
            }
          }else if(res.data.code == 6){
             this.dialogContacts=true;
          }else{
            this.$message.error(res.data.msg )
          }
        // if(res.data.code == 6){
        //   this.dialogContacts=true;
        // }else{
        //   if(this.loginForm.mobile!= "" && /^1[3456789]\d{9}$/.test(this.loginForm.mobile)){
        //       if (!this.timer) {
        //         this.count = TIME_COUNT;
        //         this.show = false;
        //         this.timer = setInterval(() => {
        //           if (this.count > 0 && this.count <= TIME_COUNT) {
        //             this.count--;
        //           } else {
        //             this.show = true;
        //             clearInterval(this.timer); // 清除定时器
        //             this.timer = null;
        //           }
        //         }, 1000);
        //       }
        //   }else{
        //       if (this.loginForm.mobile == "") {
        //           this.$message.error("请输入手机号！")
        //       }else if(!/^1[3456789]\d{9}$/.test(this.loginForm.mobile)){
        //           this.$message.error("手机号格式不正确！")
        //       }
        //   }
        // }
      })
      
    },
    fetchsmscode() {
      // 短信验证码
      var reqParams = {
        mobile: this.loginForm.mobile,
        prefix: "+86"
      };
      getsmscode(reqParams).then(res => {
          if (res.data.code == 0) {
          }else{
            this.$message.error(res.data.msg )
          }
        })
        .catch(error => {
         
        });
    },

    // 验证短信验证码
    checksmscode() {
      var reqParams = {
        mobile: this.loginForm.mobile,
        code: this.loginForm.pwdCode
      };
      getchecksmscode(reqParams).then(res => {
          if (res.data.code == 0) {
            this.LoginByCode()
          } else{
            this.$message.error(res.data.msg)
          }
        })
        .catch(error => {

        });
    },

     LoginByCode() {
      var reqParams = {
        mobile: this.loginForm.mobile,
        pwdCode: this.loginForm.pwdCode,
        type:1,
      };
      loginInstead(reqParams).then(res => {
          if (res.data.code == 0) {
            setTimeout(() => {
              this.$message.success("登录成功！");
              window.localStorage.setItem('token',res.data.data.token);
              setCookie('wangyiaccid',res.data.data.wang_yi_accid);
              setCookie('wangyitoken',res.data.data.wang_yi_token);
              window.localStorage.setItem("cilentuid",res.data.data.client_uid);
              if(window.localStorage.getItem('token')){
                axios({
                      method: 'post',
                      url: '/api/web/client/user-info',
                      data: {
                          token:window.localStorage.getItem('token'),
                      }
                    }).then(res=>{
                          if(res.data.code == 0){
                            setCookie('sunzheng',window.localStorage.token);
                            setCookie('islogin',true);
                            // this.$root.faceUrl = res.data.data.face_url;
                            window.localStorage.setItem('username',res.data.data.user_name);
                            setCookie('userpic',res.data.data.face_url);
                            this.$router.go(0);
                          }else{
                            this.$message.error(res.data.msg)
                          }
                        }
                    )
              }
              this.showdialog = false;
              this.loginForm.mobile = "";
              this.loginForm.pwdCode = "";
            }, 1000);
          }else{
            this.$message.error(res.data.msg )
          }
        })
        .catch(error => {
          // this.$message.error("提交失败！请重试！");
        });
    },
  },
  computed: {
    ...mapState(["token"]),
    swiper() {
      return this.$refs.mySwiper.swiper;
    },
    TextStyle() {
      return {
        fontSize: "14px",
        color: "#141414"
      };
    },
    IntroStyle() {
      return {
        fontSize: "12px",
        color: "#141414"
      };
    }
  },
  beforeRouteEnter(to, from, next) {
    next(_this => (_this.$root.homeshow = false));
  },
  mounted() {
    window.addEventListener("scroll", this.handleScroll, true);
    this.fetchdata();
    setTimeout(() => {
      this.FetchBuildingDetail();
      this.FetchRecommendHouse();
    }, 1000);
  },
  updated() {
    if (this.imgarr.length > 3) {
      this.$nextTick(() => {
        const swiperTop = this.$refs.swiperTop.swiper;
        const swiperThumbs = this.$refs.swiperThumbs.swiper;
        swiperTop.controller.control = swiperThumbs;
        swiperThumbs.controller.control = swiperTop;
      });
    }
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  }
};
</script>
<style lang="scss" scoped>
@import "../../../style/common.scss";
@import "./housedetail.scss";
</style>
<style type="text/css" lang="scss" scoped>
.anchorBL {
  display: none;
}
.el-input__inner {
  border: none;
  width: 7vw;
}
</style>
<style type="text/css" lang="scss">
.lunbo {
  .swiper-container {
    background-color: #000;
  }
  .swiper-slide {
    background-size: cover;
    background-position: center;
  }
  .gallery-top {
    float: left;
    width: 666px;
    height: 100%;
    z-index: 100;
    position: absolute;
  }
  .gallery-thumbs {
    float: right;
    width: 164px;
    box-sizing: border-box;
    padding: 10px 0;
    position: absolute;
    left: 678px;
    overflow: hidden;
    margin: 0 auto;
    height: 500px;
    z-index: 100;
  }
  .gallery-thumbs .swiper-slide {
    height: 111px;

    position: relative;
    width: 100%;
    opacity: 0.4;
  }
  .swiper-slide2 {
    height: 111px;
    width: 100%;
    margin: 10px 0;
  }
  .gallery-thumbs .swiper-slide-active {
    opacity: 1;
  }
}
.yule {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 1005;
  background: rgba(255, 255, 255, 1);
}
.inout {
  position: fixed;
  z-index: 1001;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
}
.el-icon {
  display: none;
}
.housedetail_container {
  .el-rate {
    margin-left: 10px;
    margin-top: 2px;
    .el-rate__icon {
      margin-right: 0px;
    }
  }
}
.el-table__expand-icon {
  display: none;
}
.el-table tbody tr.current-row>td { 
  background-color:#D2EAF5 !important;
}
.el-table tbody tr:hover>td { 
  background-color:#D2EAF5 !important;
}
</style>
